{% extends "ApiManager/base.html" %}
{% block title %}邮件管理{% endblock %}
{% load staticfiles %}
{% block content %}
    <div class="am-modal am-modal-prompt" tabindex="-1" id="add_email_model">
        <div class="am-modal-dialog">
            <div style="font-size: medium;" class="am-modal-hd">ApiManager</div>
            <div class="am-modal-bd">
                <form class="form-horizontal" id="add_email">
                    <div class="form-group">
                        <label class="control-label col-sm-3" for="mode"
                               style="font-weight: inherit; font-size: small " hidden="">mode：</label>
                        <div class="col-sm-9">
                            <input name="index" type="text" class="form-control" id="mode" value="add" hidden="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-3" for="email_name"
                               style="font-weight: inherit; font-size: small ">邮件组名称：</label>
                        <div class="col-sm-9">
                            <input name="email_name" type="text" class="form-control" id="email_name"
                                   placeholder="少于100字符" value="">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="control-label col-sm-3" for="email_value"
                               style="font-weight: inherit; font-size: small ">邮件组地址：</label>
                        <div class="col-sm-9">
                            <input name="email_value" type="text" class="form-control" id="email_value"
                                   placeholder="多个邮件以半角逗号分隔" value="">
                        </div>
                    </div>

                </form>
            </div>
            <div class="am-modal-footer">
                <span class="am-modal-btn" data-am-modal-cancel>取消</span>
                <span class="am-modal-btn" data-am-modal-confirm>提交</span>
            </div>
        </div>
    </div>

    <div class="am-modal am-modal-confirm" tabindex="-1" id="my-invalid">
        <div class="am-modal-dialog">
            <div class="am-modal-hd">ApiManager</div>
            <div class="am-modal-bd">
                确定删除该邮件配置么？
            </div>
            <div class="am-modal-footer">
                <span class="am-modal-btn" data-am-modal-cancel>取消</span>
                <span class="am-modal-btn" data-am-modal-confirm>确定</span>
            </div>
        </div>
    </div>
    <div class="admin-biaogelist">
        <div class="listbiaoti am-cf">
            <ul class="am-icon-flag on"> 邮件管理</ul>
            <dl class="am-icon-home" style="float: right;"> 当前位置： 系统设置 > <a href="#">邮件管理</a></dl>
            <dl>
                <button type="button" id="add_email_button" class="am-btn am-btn-danger am-round am-btn-xs am-icon-plus">
                    添加邮件组
                </button>
            </dl>
        </div>

{#        <div class="am-btn-toolbars am-btn-toolbar am-kg am-cf">#}
{#            <form id="pro_filter" method="post" action="/api/email_list/1/">#}
{#                <ul>#}
{#                    <li style="padding-top: 5px"><input value="{{ info.email_name }}" type="text" name="email_name"#}
{#                                                        class="am-input-sm am-input-xm"#}
{#                                                        placeholder="邮件名称"/></li>#}
{#                    <li>#}
{##}
{#                        <button class="am-btn am-radius am-btn-xs am-btn-success"#}
{#                                style="margin-top: 9px;">查询#}
{#                        </button>#}
{#                    </li>#}
{#                </ul>#}
{#            </form>#}
{#        </div>#}
        <form class="am-form am-g" id="email_list" name="email_list">
            <table width="100%" class="am-table am-table-bordered am-table-radius am-table-striped">
                <thead>
                <tr class="am-success">
                    <th class="table-check"><input type="checkbox" id="select_all"/></th>
                    <th class="table-title">序号</th>
                    <th class="table-type">邮件名称</th>
                    <th class="table-date am-hide-sm-only">邮件地址</th>
                    <th width="163px" class="table-title">操作</th>
                </tr>
                </thead>
                <tbody>

                {% for foo in email %}
                    <tr>
                        <td><input type="checkbox" name="report_{{ foo.id }}" value="{{ foo.id }}"/></td>
                        <td>{{ forloop.counter }}</td>
                        <td><a href="/api/view_report/{{ foo.id }}">{{ foo.email_name }}</a></td>
                        <td>{{ foo.email_value }}</td>
                        <td>
                            <div class="am-btn-toolbar">
                                <div class="am-btn-group am-btn-group-xs">
                                    <button type="button"
                                            class="am-btn am-btn-default am-btn-xs am-text-secondary am-round"
                                            data-am-popover="{content: '编辑', trigger: 'hover focus'}"
                                            onclick="edit('{{ foo.id }}', '{{ foo.email_name }}', '{{ foo.email_value }}')"> <span
                                            class="am-icon-pencil-square-o"></span></button>
                                    <button type="button"
                                            class="am-btn am-btn-default am-btn-xs am-text-danger am-round"
                                            data-am-popover="{content: '删除', trigger: 'hover focus'}"
                                            onclick="del('{{ foo.id }}')"><span
                                            class="am-icon-trash-o"></span></button>
                                </div>
                            </div>
                        </td>

                    </tr>
                {% endfor %}
                </tbody>
            </table>

            <ul class="am-pagination am-fr">
                {{ page_list }}
            </ul>
            <hr/>
        </form>
    </div>
    <script type="text/javascript">
        $('#add_email_button').on('click', function () {
            $('#add_email_model').modal({
                relatedTarget: this,
                onConfirm: function () {
                    info_ajax('#add_email', '/api/add_email/')
                },
                onCancel: function () {
                    $("#email_name").val("");
                    $("#email_value").val("");
                }
            });
        });

        function edit(id, email_name, email_value) {
            $('#mode').val(id);
            $('#email_name').val(email_name);
            $('#email_value').val(email_value);
            $('#add_email_model').modal({
                relatedTarget: this,
                onConfirm: function () {
                    update_data_ajax('#add_email', '/api/edit_email/')
                },
                onCancel: function () {
                }
            });

        }

        function del(id) {
            $('#my-invalid').modal({
                relatedTarget: this,
                onConfirm: function () {
                    del_data_ajax(id, '/api/email_list/1/')
                },
                onCancel: function () {
                }
            });
        }

        $('#select_all').click(function () {
            var isChecked = $(this).prop("checked");
            $("input[name^='email']").prop("checked", isChecked);
        })

    </script>

{% endblock %}